<template>
	<div class="star">
		<uni-popup ref="popup" type="bottom" :maskClick="true">
			<div class="content">
				<div class="search">
					<image class="search-icon" src="/static/icon/search.png" mode=""></image>
					<input type="text" v-model="keyword" placeholder="搜索站内用户" @input="changeKeyword" />
				</div>
				<scroll-view class="orderlist" scroll-y="true" style="height: 750rpx;" lower-threshold="20"
					@scrolltolower="scrollLower">
					<div class="list">
						<div class="list-item" v-for="(item,index) in list" :key="index"
							@click="handleCheckboxChange(item)">
							<div class="left">
								<Radio :isChecked="isSelected(item)"></Radio>
								<image class="user-icon" :src="item.avatar" mode=""></image>
							</div>
							<div class="center">
								<div class="head">{{item.nickname}}</div>
							</div>
						</div>
					</div>
				</scroll-view>
				<div class="footer-send">
					<div class="user-list">
						<div class="user-item" v-for="(item,index) in selectedUsers" :key="index">
							<image class="user-icon" :src="item.avatar" mode=""></image>
							<div>{{item.nickname}}</div>
						</div>
					</div>
					<div class="want" @click="submit">
						确认
					</div>
				</div>
			</div>

		</uni-popup>
	</div>
</template>
<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import Radio from '@/components/radio.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				page: 1,
				list_rows: 20,
				loading: false,
				list: [],
				keyword: '',
				selectedUsers: [],
			}
		},
		props: {
			selected: {
				type: Array,
				default: []
			},
		},
		computed: {
			...mapState(['']),
		},
		watch: {
			selected(val) {
				this.selectedUsers = val
			}
		},
		mounted() {
			this.getPageList();
		},
		methods: {
			show() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			// 检查用户是否已经被选中
			isSelected(user) {
				return this.selectedUsers.some(selectedUser => selectedUser.id === user.id);
			},
			// 更新选中用户的方法
			handleCheckboxChange(user) {
				if (this.isSelected(user)) {
					// 取消选中：从 selectedUsers 中移除该用户
					this.selectedUsers = this.selectedUsers.filter(
						selectedUser => selectedUser.id !== user.id
					);
				} else {
					// 选中：向 selectedUsers 添加该用户
					this.selectedUsers.push({
						id: user.id,
						nickname: user.nickname,
						avatar: user.avatar
					});
				}

			},
			scrollLower(e) {
				this.getPageList()
			},
			getPageList() {
				let that = this
				that.$httpRequest.request({
					that: that,
					url: 'wechat/getUserList',
					method: 'get',
					params: {
						pageNo: that.page,
						pageSize: that.list_rows,
						keyword: that.keyword,
					},
					success: res => {
						that.loading = false
						if (res.code === that.$httpConfig.SUCCESS_CODE) {
							if (that.page === 1) {
								that.list = res.data.rows
							} else {
								that.list = that.list.concat(res.data.rows)
							}
							that.page++
						}
					}
				}, true)
			},
			submit() {
				this.$emit('getUser', this.selectedUsers);
				close();
			},
			changeKeyword() {
				this.list = []
				this.page = 1
				this.getPageList()
			},
		},
		components: {
			uniPopup,
			Radio
		}
	};
</script>
<style scoped lang="scss">
	@import '@/style/def.scss';

	.star {
		position: fixed;
		z-index: 99999;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}


	.content {
		background: #fff;
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.list {
		margin-top: 20rpx;
		height: 100%;
		overflow: auto;

		.list-item {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.user-icon {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin: 0 20rpx 0 30rpx;
				}

			}

			.center {
				flex: 1;

				.head {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #1C1C1C;
					line-height: 40rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						padding-left: 20rpx;
					}
				}

				.footer {
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #1C1C1C;
					line-height: 40rpx;

				}
			}

			.right {
				padding: 0 20rpx;
				height: 54rpx;
				min-width: 80rpx;
				background: #1C1C1C;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 54rpx;
			}
		}
	}

	.search {
		background: #F4F4F5;
		border-radius: 44rpx;
		position: relative;
		width: 686rpx;
		height: 72rpx;
		margin: 30rpx auto 10rpx;

		.search-icon {
			position: absolute;
			top: 50%;
			left: 30rpx;
			transform: translateY(-50%);
			width: 42rpx;
			height: 42rpx;
		}

		input {
			width: 100%;
			height: 100%;
			line-height: 72rpx;
			font-size: 28rpx;
			padding: 0 80rpx;
			box-sizing: border-box;
		}
	}

	.footer-send {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 120rpx;
		margin: 0 auto;
		padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		z-index: 10;
		// padding-bottom: constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
		// padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
		box-sizing: border-box;

		.want {
			width: 214rpx;
			height: 70rpx;
			border-radius: 100rpx;
			background: linear-gradient(180deg, #EC6A0A 0%, #FB8E26 100%);
			font-size: 28rpx;
			font-weight: normal;
			line-height: 70rpx;
			text-align: center;
			color: #FFFFFF;
		}
	}

	.user-list {
		width: 450rpx;
		overflow-x: auto;
		display: flex;
		align-items: center;

		//隐藏滚动条
		&::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.user-item {
			width: 100rpx;
			margin-right: 10rpx;

			image {
				margin: 0 auto;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				display: block;
			}

			div {
				padding-top: 10rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #1C1C1C;
				line-height: 20rpx;
				max-width: 100rpx;
				@extend .nowrap;
			}
		}
	}
</style>